<template>
    <div class="swiper">
        <img :src="item.imgUrl" alt="" v-for="(item, key) in bannerList" :key="item.id" :class="{ flag: key == imgA }">
        <p>
            <span :class="imgA == key ? 'showSpan' : 'span'" v-for="(item, key) in bannerList" :key="key"></span>
        </p>
        <div class="yuan1" @click="taggerLeft">&gt;</div>
        <div class="yuan2" @click="taggerRight">&lt;</div>
    </div>
</template>

<script>
import { getBanner } from '@/utils/api/homeapi'
export default {
    data() {
        return {
            bannerList: [],
            imgA: 0,
            timer: null
        }
    },
    methods: {
        /* 获取轮播图数据  */
        async getBannerList() {
            let res = await getBanner();
            this.bannerList = res.result;
        },
        /* 轮播图手动切换 */
        taggerLeft() {
            if (this.imgA != 0) {
                this.imgA--;
            } else {
                this.imgA = 4;
            }
        },
        /* 轮播图手动切换 */
        taggerRight() {
            if (this.imgA != 4) {
                this.imgA++;
            } else {
                this.imgA = 0;
            }
        },
    },
    mounted() {
        this.getBannerList();
        this.timer = setInterval(() => {
            this.imgA++;
            if (this.imgA >= this.bannerList.length) {
                this.imgA = 0;
            }
        }, 1000)
    },
}
</script>

<style lang="scss" scoped>
.swiper {
    width: 100%;
    height:500px;
    position: relative;

    img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    p {
        width: 200px;
        height: 40px;
        // background-color: red;
        z-index: 9999;
        position: absolute;
        left: 700px;
        bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: white;
            cursor: pointer;
        }

        span:hover {
            background-color: #231f1b;
        }

        .showSpan {
            background-color: #231f1b;
        }
    }

    .flag {
        opacity: 1;
        z-index: 1000;
    }

    .yuan1 {
        width: 60px;
        height: 60px;
        background-color: black;
        opacity: 0.7;
        border-radius: 50%;
        z-index: 9999;
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translate(0, -50%);
        font-size: 40px;
        color: white;
        text-align: center;
        cursor: pointer;
    }

    .yuan2 {
        width: 60px;
        height: 60px;
        background-color: black;
        opacity: 0.7;
        border-radius: 50%;
        z-index: 9999;
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translate(0, -50%);
        font-size: 40px;
        color: white;
        text-align: center;
        cursor: pointer;
    }
}
</style>